<template>
	<!-- 用bootstrap 完成基础样式 -->
	<div id="demo" class="carousel" :style="{width:innerWidth+'px'}">
		<!-- 轮播图片 -->
		<div class="carousel-inner" :style="ulStyle">
			<div class="carousel-item">
				<a href="javascript:;" title="与恶魔在一起">
					<img src="" :style="{width:innerWidth+'px'}" />
				</a>
				<a to="javascript:;"><与恶魔在一起></a>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data(){
			return {
				innerWidth:window.innerWidth,
				i:0,//当前正在播放的是哪张图片
				imgs:[],
				
			}
		},
		created(){
			//当有人拖拽界面的时候改变界面大小,resize:窗口大小改变
			window.addEventListener("resize",()=>{
				this.innerWidth=window.innerWidth;
			})
		},
		computed:{//希望网页宽度变化或者i变化，则自动重新计算
			ulStyle(){//修饰所有图片的父元素
				var width=this.innerWidth*(this.imgs.length+1)+"px";
				var transition="all .5s linear";
				var marginLeft=-this.i*this.innerWidth+"px";
				return {transition,width,marginLeft}
			}
		}
	}
</script>

<style scoped>
	
</style>
